<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <el-header class="header">
        <header-title></header-title>
      </el-header>
      <el-container class="second-container">
        <el-aside class="second-main">
          <el-header class="JC-wrapper">
            <jc-device-status :title="$t('ems.extrusion')" :num="10" :jcDataList="data.jcDataList"
                              :mixDataList="data.mixDataList"></jc-device-status>
          </el-header>
          <el-header class="data-wrapper">
            <state-data-analysis :title="$t('ems.stateAnalysis')" :statusData="data.statusData"></state-data-analysis>
          </el-header>
        </el-aside>
        <el-main class="sum-wrapper">
          <total-equipment :middleStatusData="data.middleStatusData"></total-equipment>
        </el-main>
        <el-aside class="dg-wrapper">
          <!--贴合条线-->
          <el-header class="TH-wrapper">
            <th-Device-status :title="$t('ems.fit')" :thDataList="data.thDataList"></th-Device-status>
          </el-header>
          <!--精加工条线-->
          <el-header class="JKJ-wrapper">
            <jkj-device-status :title="$t('ems.finishing')" :num="8" :jjgDataList="data.jjgDataList"
                               :jjgDataList2="data.jjgDataList2"></jkj-device-status>
          </el-header>
          <el-header class="chart-wrapper">
            <running-time :runningTime="data.runningTime" :runningTime2="data.runningTime2" :colorList="data.colorList"
                          :tablesTitle="data.tablesTitle"
            ></running-time>
          </el-header>
        </el-aside>
      </el-container>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import fullScreenContainer from '@/components/fullScreenContainer'
import useI18n from '@/hooks/language'
import '@/style/tailwind.css'
import {
  getAllEquipInfo,
  getJCRealTimeInfo,
  getJJGRealTimeInfo,
  getProductionLineRunningTime,
  getTHRealTimeInfo,
  getMixRealTimeInfo, getProductionLinePowerOnTime
} from '@/api/mesApi'
import headerTitle from '@/components/ems/equipmentProdLine/headerTitle'
import totalEquipment from '@/components/ems/equipmentProdLine/totalEquipment'
import runningTime from '@/components/ems/equipmentProdLine/runningTime'
import jcDeviceStatus from '@/components/ems/equipmentProdLine/jcDeviceStatus'
import thDeviceStatus from '@/components/ems/equipmentProdLine/thDeviceStatus'
import jkjDeviceStatus from '@/components/ems/equipmentProdLine/jkjDeviceStatus'
import stateDataAnalysis from '@/components/ems/equipmentProdLine/stateDataAnalysis'
// import 'animate.css'

const { t } = useI18n()

const data = reactive({
  ready: false,
  titles: 'AF产线实时状态监控',
  runningTime: [], // 运行时长
  runningTime2: [], // 运行时长
  runningTime3: [], // 运行时长
  mixDataList: [], // 挤出
  jcDataList: [], // 挤出
  thDataList: [], // 贴合
  jjgDataList: [], // 精加工1
  jjgDataList2: [], // 精加工2
  statusData: [], // 分析状态
  middleStatusData: [], // 中间状态
  type: 'Running', // 产线运行状态类型
  color: '#0FC109', // 产线运行状态类型颜色
  colorList: [],
  typeNo: 2, // 产线运行状态类型标识
  tablesTitle: t('ems.operation')
})

onMounted(() => {
  data.ready = true
  getDataList()
  setInterval(() => {
    data.type = 'Running'
    data.color = '#0FC109'
    data.tablesTitle = t('ems.operation')
    // if (data.typeNo === 1) {
    //   data.type = 'PowerOn'
    //   data.color = '#2A94F1'
    //   data.tablesTitle = t('ems.powerOn')
    //   data.typeNo++
    // } else if (data.typeNo === 2) {
    //   data.type = 'Running'
    //   data.color = '#0FC109'
    //   data.tablesTitle = t('ems.operation')
    //   data.typeNo++
    // } else if (data.typeNo === 3) {
    //   data.type = 'InProduction'
    //   data.color = '#089FA8'
    //   data.tablesTitle = t('ems.production')
    //   data.typeNo++
    // } else if (data.typeNo === 4) {
    //   data.type = 'ShutDown'
    //   data.color = '#E28E01'
    //   data.tablesTitle = t('ems.shutDown')
    //   data.typeNo++
    // } else if (data.typeNo === 5) {
    //   data.type = 'BreakDown'
    //   data.color = '#EE2202'
    //   data.tablesTitle = t('ems.breakdown')
    //   data.typeNo++
    // } else {
    //   data.typeNo = 1
    //   data.type = 'PowerOn'
    //   data.color = '#2A94F1'
    //   data.tablesTitle = t('ems.powerOn')
    // }
    if (data.typeNo === 1) {
      data.typeNo++
    } else {
      data.typeNo = 1
    }
    getDataList()
  }, 6000)
})

const getDataList = () => {
  getMixRealTimeInfo().then(res => {
    if (res.Status === 200) {
      data.mixDataList = res.LstEquipInfo
    }
  })
  // 挤出产线状态
  getJCRealTimeInfo().then(res => {
    if (res.Status === 200) {
      data.jcDataList = res.LstEquipInfo
    }
  })
  // 贴合产线状态
  getTHRealTimeInfo().then(res => {
    if (res.Status === 200) {
      data.thDataList = res.LstEquipInfo
    }
  })
  // 精加工产线状态
  getJJGRealTimeInfo().then(res => {
    if (res.Status === 200) {
      data.jjgDataList = []
      data.jjgDataList2 = []
      res.LstEquipInfo.forEach((item, index) => {
        if (index < 4) {
          data.jjgDataList.push(item)
        } else {
          data.jjgDataList2.push(item)
        }
      })
    }
  })
  // 各工序设备开机率和状态分析
  getAllEquipInfo().then(res => {
    if (res.Status === 200) {
      data.middleStatusData = res
      data.statusData = res
    }
  })
  // 产线运行时长
  // getProductionLineRunningTime({ type: data.type }).then(res => {
  //   if (res.Status === 200) {
  //     data.runningTime = []
  //     data.runningTime2 = []
  //     data.colorList = []
  //     res.LstEquipInfo.forEach((item, index) => {
  //       data.runningTime.push(item.LineName)
  //       data.runningTime2.push(item.Duration)
  //       data.tablesTitle = t('ems.operation')
  //       data.colorList.push(data.color)
  //     })
  //   }
  // })
  // 产线运行时长新的
  getProductionLinePowerOnTime().then(res => {
    if (res.Status === 200) {
      if (data.typeNo === 1) {
        data.runningTime = []
        data.runningTime2 = []
        data.colorList = []
        res.LstEquipInfo.forEach((item, index) => {
          if (index < (res.LstEquipInfo.length / 2)) {
            data.runningTime.push(item.LineName)
            data.runningTime2.push(item.Duration)
            data.colorList.push(data.color)
          }
        })
      } else {
        data.runningTime = []
        data.runningTime2 = []
        data.colorList = []
        res.LstEquipInfo.forEach((item, index) => {
          if (index > (res.LstEquipInfo.length / 2)) {
            data.runningTime.push(item.LineName)
            data.runningTime2.push(item.Duration)
            data.colorList.push(data.color)
          }
        })
      }
    }
  })
}
</script>

<style scoped lang="scss">
@forward "index";

body,
#app,
#dv-full-screen-container {
  background-color: #041533;
}
</style>
